<template>
  <!-- 菜单按钮权限树子组件 -->
  <div class="tree-box">
    <el-tree :data="tree" default-expand-all node-key="id" ref="tree" highlight-current :default-checked-keys="treeMenus">
      <span class="custom-tree-node" slot-scope="{ node }">
        <span>{{ node.label }}</span>
        <!-- 按钮列表 -->
        <span v-if="node.isLeaf" :id="node.id">
          <input type="checkbox" v-model="node.data.sel" @click="checkChange(node.data, 'sel')"/>
          <label>查询</label>
          <input type="checkbox" v-model="node.data.add" @click="checkChange(node.data, 'add')" />
          <label>添加</label>
          <input type="checkbox" v-model="node.data.del" @click="checkChange(node.data, 'del')"/>
          <label>删除</label>
          <input type="checkbox" v-model="node.data.edit" @click="checkChange(node.data, 'edit')"/>
          <label>修改</label>
          <input type="checkbox" v-model="node.data.upload" @click="checkChange(node.data, 'upload')"/>
          <label>上传</label>
          <input type="checkbox" v-model="node.data.down" @click="checkChange(node.data, 'down')"/>
          <label>下载</label>
          <input type="checkbox" v-if="node.data.id === 75 || node.data.id === 76" v-model="node.data.batch" @click="checkChange(node.data, 'batch')"/>
          <label v-if="node.data.id === 75 || node.data.id === 76">批量添加</label>
          <span class="all-btn" @click="() => checkChange(node.data, 'all')" :id="node.data.id" v-text="getAll(node.data)"></span>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  // 父组件传值
  props: {
    // 目录树
    trees: {
      type: Array
    },
    // 选中按钮
    selBtns: {
      type: Array
    }
  },

  // 当前实例数据
  data () {
    return {
      // 授权菜单数据
      treeMenus: [],
      // 当前树数据
      tree: [],
      // 授权按钮数据
      roleMenus: [],
      // 勾选按钮数据
      menuBtns: []
    };
  },

  // 实例创建后执行
  created () {
    // 显示树节点
    this.showTree();
  },

  // 监听
  watch: {
    // 监听树数据
    trees: {
      immediate: true,
      handler (newVal, oldVal) {
        this.showTree();
      }
    },
    // 监听授权按钮数据
    selBtns: {
      handler (newVal, oldVal) {
        if (newVal.length > 0) {
          this.selBtns = newVal;
        }
      }
    }
  },

  methods: {
    // 勾选传递父组件参数
    checkChange (data, type) {
      let _this = this;
      let tid = document.getElementById(data.id);
      for (let i = _this.tree.length; i--;) {
        for (let j = _this.tree[i].children.length; j--;) {
          let all = _this.tree[i].children[j];
          if (all.children.length) {
            for (let k = all.children.length; k--;) {
              let treeAll = all.children[k];
              if (treeAll.label === data.label) {
                if (type === 'sel') {
                  if (treeAll.sel === 0) {
                    treeAll.sel = 1;
                    _this.getText(treeAll);
                    _this.$emit('checkTrees', treeAll);
                  } else {
                    treeAll.sel = 0;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '全选';
                  }
                }
                if (type === 'add') {
                  if (treeAll.add === 0) {
                    treeAll.add = 1;
                    _this.$emit('checkTrees', treeAll);
                    _this.getText(treeAll);
                  } else {
                    treeAll.add = 0;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '全选';
                  }
                }
                if (type === 'batch') {
                  if (treeAll.batch === 0) {
                    treeAll.batch = 1;
                    _this.$emit('checkTrees', treeAll);
                    _this.getText(treeAll);
                  } else {
                    treeAll.batch = 0;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '全选';
                  }
                }
                if (type === 'del') {
                  if (treeAll.del === 0) {
                    treeAll.del = 1;
                    _this.$emit('checkTrees', treeAll);
                    _this.getText(treeAll);
                  } else {
                    treeAll.del = 0;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '全选';
                  }
                }
                if (type === 'edit') {
                  if (treeAll.edit === 0) {
                    treeAll.edit = 1;
                    _this.getText(treeAll);
                    _this.$emit('checkTrees', treeAll);
                  } else {
                    treeAll.edit = 0;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '全选';
                  }
                }
                if (type === 'upload') {
                  if (treeAll.upload === 0) {
                    treeAll.upload = 1;
                    _this.$emit('checkTrees', treeAll);
                    _this.getText(treeAll);
                  } else {
                    treeAll.upload = 0;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '全选';
                  }
                }
                if (type === 'down') {
                  if (treeAll.down === 0) {
                    treeAll.down = 1;
                    _this.$emit('checkTrees', treeAll);
                    _this.getText(treeAll);
                  } else {
                    treeAll.down = 0;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '全选';
                  }
                }
                if (type === 'all') {
                  if (tid.innerText === '全选') {
                    treeAll.sel = 1;
                    treeAll.add = 1;
                    treeAll.edit = 1;
                    treeAll.del = 1;
                    treeAll.upload = 1;
                    treeAll.down = 1;
                    treeAll.batch = 1;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '取消';
                  } else {
                    treeAll.sel = 0;
                    treeAll.add = 0;
                    treeAll.edit = 0;
                    treeAll.del = 0;
                    treeAll.upload = 0;
                    treeAll.down = 0;
                    treeAll.batch = 0;
                    _this.$emit('checkTrees', treeAll);
                    tid.innerText = '全选';
                  }
                }
              }
            }
          }
          if (all.label === data.label) {
            if (type === 'sel') {
              if (all.sel === 0) {
                all.sel = 1;
                _this.getText(all);
                _this.$emit('checkTrees', all);
              } else {
                all.sel = 0;
                _this.$emit('checkTrees', all);
                tid.innerText = '全选';
              }
            }
            if (type === 'add') {
              if (all.add === 0) {
                all.add = 1;
                _this.$emit('checkTrees', all);
                _this.getText(all);
              } else {
                all.add = 0;
                _this.$emit('checkTrees', all);
                tid.innerText = '全选';
              }
            }
            if (type === 'batch') {
              if (all.batch === 0) {
                all.batch = 1;
                _this.$emit('checkTrees', all);
                _this.getText(all);
              } else {
                all.batch = 0;
                _this.$emit('checkTrees', all);
                tid.innerText = '全选';
              }
            }
            if (type === 'del') {
              if (all.del === 0) {
                all.del = 1;
                _this.$emit('checkTrees', all);
                _this.getText(all);
              } else {
                all.del = 0;
                _this.$emit('checkTrees', all);
                tid.innerText = '全选';
              }
            }
            if (type === 'edit') {
              if (all.edit === 0) {
                all.edit = 1;
                _this.getText(all);
                _this.$emit('checkTrees', all);
              } else {
                all.edit = 0;
                _this.$emit('checkTrees', all);
                tid.innerText = '全选';
              }
            }
            if (type === 'upload') {
              if (all.upload === 0) {
                all.upload = 1;
                _this.$emit('checkTrees', all);
                _this.getText(all);
              } else {
                all.upload = 0;
                _this.$emit('checkTrees', all);
                tid.innerText = '全选';
              }
            }
            if (type === 'down') {
              if (all.down === 0) {
                all.down = 1;
                _this.$emit('checkTrees', all);
                _this.getText(all);
              } else {
                all.down = 0;
                _this.$emit('checkTrees', all);
                tid.innerText = '全选';
              }
            }
            if (type === 'all') {
              if (tid.innerText === '全选') {
                all.sel = 1;
                all.add = 1;
                all.edit = 1;
                all.del = 1;
                all.upload = 1;
                all.down = 1;
                all.batch = 1;
                _this.$emit('checkTrees', all);
                tid.innerText = '取消';
              } else {
                all.sel = 0;
                all.add = 0;
                all.edit = 0;
                all.del = 0;
                all.upload = 0;
                all.down = 0;
                all.batch = 0;
                _this.$emit('checkTrees', all);
                tid.innerText = '全选';
              }
            }
          }
        }
      }
    },
    // 设置选中树
    setCheckedKeys (data) {
      this.$refs.tree.setCheckedKeys(data);
    },
    // 修正全选、取消文本
    getText (data) {
      if ([data.sel, data.add, data.edit, data.del, data.upload, data.down].indexOf(0) > -1) {
        document.getElementById(data.id).innerText = '全选';
      } else {
        document.getElementById(data.id).innerText = '取消';
      }
    },
    // 判断全选、取消状态
    getAll (data) {
      if ([data.sel, data.add, data.edit, data.del, data.upload, data.down].indexOf(0) > -1) {
        return '全选';
      } else {
        return '取消';
      }
    },
    // 显示树
    showTree () {
      let _this = this;
      let lv1 = [];
      let lv2 = [];
      let lv3 = [];
      // 获得所有菜单数据
      let treelists = _this.trees;

      for (let i = treelists.length; i--;) {
        if (treelists[i].parentId === 0) {
          lv1.push({
            id: treelists[i].id,
            label: treelists[i].menuName,

            children: []
          });
        } else if (treelists[i].parentId !== 74 && treelists[i].parentId !== 0) {
          lv2.push({
            parentId: treelists[i].parentId,
            id: treelists[i].id,
            label: treelists[i].menuName,
            children: [],
            sel: 0,
            add: 0,
            del: 0,
            edit: 0,
            upload: 0,
            down: 0

          });
        } else {
          lv3.push({
            parentId: treelists[i].parentId,
            id: treelists[i].id,
            label: treelists[i].menuName,
            sel: 0,
            add: 0,
            del: 0,
            edit: 0,
            upload: 0,
            down: 0,
            batch: 0

          });
        }
      }
      // 获得所有授权按钮数据
      let setlv3 = _this.selBtns;

      for (let i = setlv3.length; i--;) {
        lv3.map(key => {
          if (key.id === setlv3[i].menuId) {
            key.sel = setlv3[i].sel;
            key.add = setlv3[i].add;
            key.del = setlv3[i].del;
            key.edit = setlv3[i].edit;
            key.upload = setlv3[i].upload;
            key.down = setlv3[i].down;
            key.batch = setlv3[i].batch;
          }
        });
      }
      // 过滤去重
      for (let i = lv2.length; i--;) {
        for (let j = lv3.length; j--;) {
          if (lv3[j].parentId === lv2[i].id) {
            lv2[i].children.push(lv3[j]);
          }
        }
      }
      // 获得所有授权按钮数据
      let setlv2 = _this.selBtns;

      for (let i = setlv2.length; i--;) {
        lv2.map(key => {
          if (key.id === setlv2[i].menuId) {
            key.sel = setlv2[i].sel;
            key.add = setlv2[i].add;
            key.del = setlv2[i].del;
            key.edit = setlv2[i].edit;
            key.upload = setlv2[i].upload;
            key.down = setlv2[i].down;
            key.batch = setlv3[i].batch;
          }
        });
      }
      // 过滤去重
      for (let i = lv1.length; i--;) {
        for (let j = lv2.length; j--;) {
          if (lv2[j].parentId === lv1[i].id) {
            lv1[i].children.push(lv2[j]);
          }
        }
      }
      // 赋值显示树
      _this.tree = lv1;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
